<template>
  <div class="user-center">
    <!-- 头部信息 -->
    <div class="user-header">
      <img
        v-if="store.state.user.loginUser?.userAvatar"
        :src="store.state.user.loginUser?.userAvatar"
        alt="用户头像"
        class="avatar"
      />
      <img v-else :src="'/defaultImage.png'" alt="用户头像" class="avatar" />
      <div class="user-info">
        <h2 class="username">
          {{ store.state.user.loginUser.userName ?? "无昵称" }}
        </h2>
        <p class="user-slug">{{ store.state.user.loginUser.userAccount }}</p>
        <p class="rank">全站排名 {{ user.rank }}</p>
      </div>
    </div>

    <div style="display: flex">
      <!-- 关注与资料 -->
      <div class="profile-section">
        <div class="stats-row">
          <span>关注了 {{ user.following }}</span>
          <span>关注者 {{ user.followers }}</span>
        </div>
        <button class="edit-btn">编辑个人资料</button>

        <div class="resume-section">
          <h3>定制你的理想工作机会</h3>
          <div class="progress-bar">
            <div
              class="progress"
              :style="{ width: `${resumeProgress}%` }"
            ></div>
            <span class="progress-text">0/4</span>
          </div>
          <p>即刻获得更优职位推荐</p>
          <button class="resume-btn">完善简历信息</button>
        </div>

        <div class="intro-section">
          <h3>个人简介</h3>
          <p class="intro-content">{{ user.intro || "无" }}</p>
          <p class="location">
            <i class="fa fa-map-marker"></i> {{ user.location }}
          </p>
        </div>
      </div>

      <!-- 数据统计区域 -->
      <div class="stats-section">
        <div class="stat-card">
          <div class="stat-header">
            <span>竞赛分数</span>
            <span class="score">{{ user.contestScore }}</span>
          </div>
          <div class="rank-info">
            <span>全球排名 {{ user.globalRank }}</span>
            <span>全国排名 {{ user.nationalRank }}</span>
          </div>
          <!--          <canvas ref="contestChart" class="contest-chart"></canvas>-->
        </div>

        <div class="stat-card">
          <div class="top-rate">Top {{ user.topRate }}</div>
          <!--          <canvas ref="topChart" class="top-chart"></canvas>-->
        </div>

        <div class="stat-card">
          <div class="circle-stat">
            <div class="circle-text">
              <span class="solved">{{ user.solved }}</span
              >/{{ user.totalProblems }}
              <p>已解答</p>
              <p class="trying">7 尝试中</p>
            </div>
          </div>
          <div class="difficulty-stats">
            <div class="difficulty-item easy">
              <span>{{ user.easySolved }}/{{ user.easyTotal }}</span>
              <span>简单</span>
            </div>
            <div class="difficulty-item medium">
              <span>{{ user.mediumSolved }}/{{ user.mediumTotal }}</span>
              <span>中等</span>
            </div>
            <div class="difficulty-item hard">
              <span>{{ user.hardSolved }}/{{ user.hardTotal }}</span>
              <span>困难</span>
            </div>
          </div>
        </div>

        <div class="stat-card">
          <h3>勋章成就</h3>
          <div class="achievement">
            <span class="achievement-count">{{ user.achievements }}</span>
            <p>即将获得</p>
            <p>月度每日一题打卡全部完成</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from "vue";
import { Chart, registerables } from "chart.js";
import { LoginUserVO } from "../../../generated/models/LoginUserVO";
import { UserControllerService } from "../../../generated";
import { useStore } from "vuex";
Chart.register(...registerables);

// 定义用户数据类型
interface User {
  avatar: string;
  name: string;
  slug: string;
  rank: string;
  following: number;
  followers: number;
  resumeProgress: number;
  intro: string | null;
  location: string;
  contestScore: number;
  globalRank: string;
  nationalRank: string;
  topRate: string;
  solved: number;
  totalProblems: number;
  easySolved: number;
  easyTotal: number;
  mediumSolved: number;
  mediumTotal: number;
  hardSolved: number;
  hardTotal: number;
  achievements: number;
}

// 模拟用户数据
const user = ref<User>({
  avatar: "https://picsum.photos/id/237/100/100",
  name: "笛",
  slug: "wo-shi-hu-ji-cheng-ya",
  rank: "100,000",
  following: 2,
  followers: 0,
  resumeProgress: 0,
  intro: null,
  location: "河北",
  contestScore: 1450,
  globalRank: "492,788/809,482",
  nationalRank: "107,595/149,967",
  topRate: "71.78%",
  solved: 105,
  totalProblems: 4132,
  easySolved: 49,
  easyTotal: 1032,
  mediumSolved: 49,
  mediumTotal: 2147,
  hardSolved: 7,
  hardTotal: 953,
  achievements: 0,
});
const store = useStore();
const contestChart = ref<HTMLCanvasElement | null>(null);
const topChart = ref<HTMLCanvasElement | null>(null);

onMounted(() => {
  // 初始化竞赛分数趋势图
  if (contestChart.value) {
    new Chart(contestChart.value, {
      type: "line",
      data: {
        labels: ["2023", "2025"],
        datasets: [
          {
            label: "竞赛分数",
            data: [1000, 1450],
            borderColor: "#ffc107",
            backgroundColor: "rgba(255, 193, 7, 0.1)",
            tension: 10,
            fill: true,
          },
        ],
      },
      options: {
        responsive: true,
        maintainAspectRatio: false,
        scales: {
          y: {
            beginAtZero: false,
            grid: {
              color: "rgba(255, 255, 255, 0.1)",
            },
            ticks: {
              color: "rgba(255, 255, 255, 0.7)",
            },
          },
          x: {
            grid: {
              color: "rgba(255, 255, 255, 0.1)",
            },
            ticks: {
              color: "rgba(255, 255, 255, 0.7)",
            },
          },
        },
        plugins: {
          legend: {
            display: false,
          },
          tooltip: {
            mode: "index",
            intersect: false,
          },
        },
      },
    });
  }

  // 初始化Top比例图
  if (topChart.value) {
    new Chart(topChart.value, {
      type: "bar",
      data: {
        labels: [""],
        datasets: [
          {
            label: "Top比例",
            data: [71.78],
            backgroundColor: "#ffc107",
            barPercentage: 0.5,
            categoryPercentage: 0.5,
          },
        ],
      },
      options: {
        responsive: true,
        maintainAspectRatio: false,
        scales: {
          y: {
            beginAtZero: true,
            max: 100,
            grid: {
              color: "rgba(255, 255, 255, 0.1)",
            },
            ticks: {
              color: "rgba(255, 255, 255, 0.7)",
            },
          },
          x: {
            grid: {
              display: false,
            },
            ticks: {
              display: false,
            },
          },
        },
        plugins: {
          legend: {
            display: false,
          },
        },
      },
    });
  }
});
</script>

<style scoped>
.user-center {
  color: #fff;
  font-family: "Inter", sans-serif;
  margin: 1px 50px;
}

.user-header {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 20px;
}

.avatar {
  width: 80px;
  height: 80px;
  border-radius: 10%;
  object-fit: cover;
}

.user-info {
  display: flex;
  flex-direction: column;
}

.username {
  font-size: 20px;
  font-weight: 600;
  margin: 0;
  color: #8f8f8f;
}

.user-slug {
  color: #ccc;
  margin: 4px 0;
}

.rank {
  color: #ccc;
  margin: 0;
  font-size: 14px;
}

.profile-section {
  display: flex;
  flex-direction: column;
  gap: 30px;
  margin-right: 20px;
  width: 30%;
}

.stats-row {
  display: flex;
  gap: 20px;
  color: #ccc;
}

.edit-btn {
  background-color: #28a745;
  color: #fff;
  border: none;
  padding: 8px 16px;
  border-radius: 4px;
  cursor: pointer;
  transition: background-color 0.2s;
}

.edit-btn:hover {
  background-color: #218838;
}

.resume-section {
  background-color: #2d2d2d;
  padding: 16px;
  border-radius: 8px;
}

.resume-section h3 {
  margin-top: 0;
  font-size: 16px;
  color: #ccc;
}

.progress-bar {
  height: 8px;
  background-color: #444;
  border-radius: 4px;
  margin: 8px 0;
  overflow: hidden;
}

.progress {
  height: 100%;
  background-color: #28a745;
  width: 0%;
  transition: width 1s;
}

.progress-text {
  float: right;
  font-size: 12px;
  color: #ccc;
}

.resume-btn {
  background-color: #444;
  color: #ccc;
  border: none;
  padding: 8px 16px;
  border-radius: 4px;
  cursor: pointer;
  margin-top: 8px;
}

.intro-section {
  background-color: #2d2d2d;
  padding: 16px;
  border-radius: 8px;
}

.intro-section h3 {
  margin-top: 0;
  font-size: 16px;
  color: #ccc;
}

.intro-content {
  color: #ccc;
  margin: 8px 0;
}

.location {
  color: #ccc;
  font-size: 14px;
  display: flex;
  align-items: center;
  gap: 4px;
}

.stats-section {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}

.stat-card {
  background-color: #2d2d2d;
  padding: 16px;
  border-radius: 8px;
}

.stat-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}

.score {
  font-size: 24px;
  font-weight: 600;
}

.rank-info {
  color: #ccc;
  font-size: 14px;
  margin-bottom: 16px;
}

.contest-chart,
.top-chart {
  width: 100%;
  height: 1px;
}

.top-rate {
  font-size: 24px;
  font-weight: 600;
  margin-bottom: 16px;
}

.circle-stat {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 16px;
}

.circle-text {
  text-align: center;
}

.solved {
  font-size: 24px;
  font-weight: 600;
  display: block;
}

.trying {
  color: #ccc;
  font-size: 14px;
  margin-top: 4px;
}

.difficulty-stats {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.difficulty-item {
  display: flex;
  justify-content: space-between;
  padding: 4px 0;
}

.easy {
  color: #28a745;
}

.medium {
  color: #ffc107;
}

.hard {
  color: #dc3545;
}

.achievement {
  display: flex;
  flex-direction: column;
}

.achievement-count {
  font-size: 24px;
  font-weight: 600;
  margin-bottom: 4px;
}

@media (max-width: 768px) {
  .user-center {
    grid-template-columns: 1fr;
  }

  .stats-section {
    grid-template-columns: 1fr;
  }
}
</style>
